<template>
  <div class="imgListInfo_box">
    <h2>{{imgInfo.title}}</h2>
    <div class="time_click">
        <span>发表时间:{{imgInfo.add_time | timeL}}</span>
        <span>点击{{imgInfo.click}} 次</span>
    </div>
    <hr>
    <template>
      <vue-preview :slides="slide1" @close="getImg"></vue-preview>
    </template>
    <div v-html="imgInfo.content" class="contents">

    </div>
    <cnt :id="id"></cnt>
  </div>
</template>
<script>
  import cnt from '../comment/comment.vue'
  export default {
    data() {
      return {
        id:this.$route.params.id,
        imgInfo:[],
        slide1:[]
      };
    },
    components:{
      cnt
    },
    created(){
      this.getImgInfo()
      this.getImg()
    },
    methods:{
      getImgInfo(){
        this.$http.get('api/getimageInfo/'+this.id).then(res=>{
          this.imgInfo= res.body.message[0]
        })
      },
      getImg(){
        this.$http.get('api/getthumimages/'+this.id).then(res=>{
          this.slide1=res.body.message
          this.slide1.forEach(item=>{
            item.msrc=item.src
            item.w= 600
              item.h= 400
          })
          
        })
      }
    }
  }
</script>
<style lang="scss">
  .imgListInfo_box{
    margin: 5px;
    h2{
        font-size: 15px;
        text-align: center;
        margin: 5px 0;
        color: red;
    }
    .time_click{
        font-size: 13px;
        color: #26a2ff;
        display: flex;
        justify-content: space-between;
    }
    .my-gallery{
        display: flex;
        justify-content:flex-start;
        flex-wrap: wrap;
      figure{
          width: 33.3333%;
          height: 33.3333%;
          margin: 0;
          padding: 3px;
        a{
          img{
            width: 100%;
          }
        }
      }
    }
    .contents{
      font-size: 14px;
      line-height: 25px;
    }
  }
</style>